<template>
    <div class="wrapper">
        <SearchBar></SearchBar>
        <div class="row1">
            <div class="profile">
                <Upload1 :onComplete="onFileComplete">
                    <div class="wrapperbigImage">
                        <l-img :data-src="user.image.url" alt="" class="bigImage" :show="user.image"/>
                        <img src="http://lc-hsgiqtbn.cn-n1.lcfile.com/ea18500643654fd29b24.jpg" alt=""
                             class="bigImage"
                             v-if="!user.image"/>
                    </div>
                </Upload1>
                <div>
                    <h4 v-if="user.name">{{user.name}}</h4>
                    <h4 v-if="!user.name"><span @click="$router.push('/login')">登录</span>/ <span
                            @click="$router.push('/register')">注册</span></h4>
                </div>
            </div>
            <div class="row1ItemWrapper">
                <div class="row1Item">
                    <div class="wrapperIconImage">
                        <div class="iconImage">
                            <img src="https://m.diyeetech.com/static/acountSetting/a4.png" alt="">
                        </div>
                    </div>

                    <div class="text">
                        我的订单
                    </div>
                </div>
                <div class="row1Item">
                    <div class="wrapperIconImage">
                        <div class="iconImage">
                            <img src="https://m.diyeetech.com/static/acountSetting/a1.png" alt="">
                        </div>
                    </div>

                    <div class="text">
                        财务中心
                    </div>
                </div>
                <div class="row1Item">
                    <div class="wrapperIconImage">
                        <div class="iconImage">
                            <img src="https://m.diyeetech.com/static/acountSetting/a3.png" alt="">
                        </div>
                    </div>

                    <div class="text">
                        我的收藏
                    </div>
                </div>
                <div class="row1Item" @click="$router.push('/design/upload')">
                    <div class="wrapperIconImage">
                        <div class="iconImage">
                            <img src="https://m.diyeetech.com/static/acountSetting/a2.png" alt="">
                        </div>
                    </div>
                    <div class="text">
                        高端定制
                    </div>
                </div>
            </div>
        </div>
        <div class="row2">
            <div class="listItem">
                <div class="text">我的设计</div>
                <div class="icon1">
                    <SvgIcon icon="icon-right1" style="font-size: 15px"></SvgIcon>
                </div>
            </div>
            <div class="listItem">
                <div class="text">店面销售</div>
                <div class="icon1">
                    <SvgIcon icon="icon-right1" style="font-size: 15px"></SvgIcon>
                </div>
            </div>
            <div class="listItem" @click="$router.push('/setting-shop')">
                <div class="text">店面设置</div>
                <div class="icon1">
                    <SvgIcon icon="icon-right1" style="font-size: 15px"></SvgIcon>
                </div>
            </div>
            <div class="listItem">
                <div class="text">账号设置</div>
                <div class="icon1">
                    <SvgIcon icon="icon-right1" style="font-size: 15px"></SvgIcon>
                </div>
            </div>
            <div class="listItem" @click="unlogin">
                <div class="text">退出登录</div>
                <div class="icon1">
                    <SvgIcon icon="icon-right1" style="font-size: 15px"></SvgIcon>
                </div>
            </div>
            <!-- <div class="listItem" @click="test">
                 <div class="text">测试</div>
                 <div class="icon1">
                     <SvgIcon icon="icon-right1" style="font-size: 15px"></SvgIcon>
                 </div>
             </div>-->
        </div>

        <div class="bottom">
            <div class="bottomItem" @click="$router.push('/')">
                <SvgIcon icon="icon-xingzhuanghei" class="icon"></SvgIcon>
                <div class="text">首页</div>
            </div>
            <div class="bottomItem">
                <SvgIcon icon="icon-fenlei1" class="icon"></SvgIcon>
                <div class="text">分类</div>
            </div>
            <div class="bottomItem">
                <SvgIcon icon="icon-gouwuche1" class="icon"></SvgIcon>
                <div class="text">购物车</div>
            </div>
            <div class="bottomItem" @click="$router.push('/myself')" style="color: orangered;">
                <SvgIcon icon="icon-geren" class="icon"></SvgIcon>
                <div class="text">个人</div>
            </div>
        </div>
    </div>
</template>
<script>
    import SvgIcon from '../../components/svgIcon'
    import SearchBar from '../../components/searchBar'
    import {clearAllCookie, setCookie} from "../../utils/cookie";
    import {get_profile, update_user_image} from "./service";
    import Upload1 from '../../components/upload'
    import myalert from "../../utils/myalert";

    export default {
        components: {SvgIcon, SearchBar, Upload1},
        data() {
            return {
                user: {image: ""}
            }
        },
        mounted() {
            var self = this
            get_profile().then(user => {
                if (user) {
                    self.user = user
                }

            })
        },
        methods: {
            test() {
            },
            unlogin() {
                clearAllCookie()
                this.$router.go(0);
            },
            onFileComplete(files) {
                var image = files[0].image
                this.user.image = image
                update_user_image(image).then(a => {
                    get_profile().then(user => {
                        self.user = user
                    })
                })
            }
        }
    }
</script>
<style lang="less" scoped>
    .wrapper {
        background: #f9f9f9;
        .bottom {
            display: flex;
            justify-content: space-between;
            padding-left: px2rem(40);
            padding-right: px2rem(40);
            padding-top: px2rem(20);
            padding-bottom: px2rem(20);
            position: fixed;
            bottom: 0;
            left: 0;
            max-width: 750px;
            width: 100%;
            border-top: 1px solid #eee;
            background: #fff;
            .bottomItem {
                text-align: center;
                .icon {
                    font-size: 20px
                }
            }

        }
        .row1 {
            background: #fff;
            padding-bottom: 10px;
            .profile {
                padding-top: 50px;
                margin-bottom: 20px;
                text-align: center;
                .wrapperbigImage {
                    background: #fff;
                    .bigImage {
                        border-radius: 100%;
                        height: px2rem(200);
                        width: px2rem(200);
                    }
                }
            }
            .row1ItemWrapper {
                display: flex;
                justify-content: space-between;
                .row1Item {
                    flex: 1;
                    text-align: center;
                    .wrapperIconImage {
                        display: flex;
                        justify-content: center;
                        .iconImage {
                            width: px2rem(80);
                            height: px2rem(80);
                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                }
            }
        }
        .row2 {
            margin-top: 10px;
            background: #fff;
            border-top: 1px solid #eee;
            .listItem {
                padding-left: px2rem(20);
                padding-right: px2rem(20);
                height: px2rem(80);
                align-items: center;
                border-bottom: 1px solid #eee;
                display: flex;
                .text {
                    flex: 1;
                }
            }
        }

    }
</style>